/* layout 开始 */
#app{
    height: 100%;
    height: 100%;
    min-width: 1300px;
    min-height: 580px;
    position: relative;
}
    /* 头部 */
div.header-wraper{
    position: absolute;
    left: 0;
    top: 0;
    height: 60px;
    right: 0;
}
.ivu-menu-dark{
    background:#495060;
}
    /* 视图 */
div.view-wraper{
    position: absolute;
    left:  0;
    top: 60px;
    right: 0;
    bottom: 0;
}
/* icon位置 */
.ivu-input-number-handler-wrap .ivu-icon , 
.full .ivu-input-number-handler-wrap .ivu-icon,
.full .ivu-tag .ivu-icon,
.ivu-input-type .ivu-icon,
div.ivu-tree .ivu-icon,
.full .ivu-btn-default .ivu-icon{
    margin-top: 0px; 
}

#add-directive-wraper .ivu-select-selection .ivu-icon {
    margin-top: -6px; 
}

.ivu-tree ul {
    font-size: 14px;
}

div.ivu-steps-head-inner .ivu-icon{
    margin-top:-1px; 
}
#adddevice div.ivu-steps-title ,#adddevice div.ivu-steps-head{
    background: #F8F8F9;
}
/* layout 结束 */


 /* 头部开始 */
    div.app-header{
        width: 100%;
        height: 60px;
        position: relative;
        background: #495060;
        color: #fff;
    }
   .logo , .app-nav{
        height: 100%;
        line-height: 60px;
        float: left;
    }
    div.app-header .site_links{
        height: 100%;
        line-height: 60px;
        float: right;
    }

    .logo {
        font-size: 40px;
        padding:0 20px;
    }

    div.site_links ul {
        overflow: hidden;
    }
    div.site_links ul li{
        float: left;
    }

    div.site_links ul li span{
        display: inline-block;
        color: #fff;
        padding: 0 10px;
        cursor: pointer;
    }
  /* 头部结束 */




 /* 监控开始 */
    span .ivu-icon {
        margin-top: -2px;
    }
    .ivu-row .ivu-input-wrapper .ivu-icon{
        margin-top: 0px;
    }
    div.full .ivu-page  .ivu-icon{
        margin-top: 0px;
    }
    div.monitor-wraper{
        width: 100%;
        height: 100%;
        position: relative;
    }  
    div.devices-container{
        position: absolute;
        left: 0;
        top: 0;
        width: 290px;
        bottom: 0;
        padding: 10px;
        box-sizing: border-box;
        border-right: 1px solid #D5DCE1;
    }
    ul.device-state{
        
    }
    ul.device-state>li{
        float: left;
        width: 33.3%;
        height: 70px;
        background: #ECF2F6;
        cursor: pointer;
    }
    ul.device-state>li.active{
        color: #2D8CF0;
    }
    ul.device-state p{text-align: center;}
    ul.device-state p.p-icon{    
        margin-top: 13px;
    }
    div.monitor-wraper ul.device-state p.dev-count{    
       font-size: 14px;
    }
 
    div.device-soso{
        margin: 10px 0;
        padding-top: 10px;
        clear: both;
    }
    div.device-tree,div.group-spin-wraper{
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 10px;
        top: 130px;
        overflow-x: hidden;
        overflow-y: auto;
    }
    div.group-spin-wraper{
        z-index: 999;
    }
    /* 设备控制 tree 开始 */
    .active-dev-offline{
        border-radius: 5px;
        background: #ECF2F6; 
        border: 1px solid #A4D4F5;
    }
    .device-controller {
        overflow: hidden;
        padding-bottom: 3px;
    }
    .device-controller li {
        float: left;
        width: 25%;
        text-align: center;
        cursor: pointer;
        font-size: 12px;
    }
    div.map-wraper{
        position: absolute;
        left: 290px;
        top: 0;
        right: 0;
        bottom: 0;
        padding: 10px;
        box-sizing: border-box;
        background: #EAEEF0;
    }
    div.map_manager{
        position: absolute;
        top: 0px;
        left: 10px;
        right: 10px;
        height: 35px;
        background: #fff;
    }
    #my-map,.spin-wraper{
        position: absolute;
        left: 10px;
        top: 35px;
        right: 10px;
        bottom: 10px;
    }
    .spin-wraper{
        z-index: 999;
        display: inline-block;
        background: rgba(0, 0, 0, 0.5);
    }

/* popup css  start */

.ol-popup
        {
            position:absolute;
            background-color:white;
            padding:11px;
            border:1px solid #cccccc;
            bottom:12px;
            left:-191px;
            width: 382px;
            box-sizing: border-box;
        }
        .ol-popup:after,.ol-popup:before
        {
            top:100%;
            border:solid transparent;
            content:" ";
            height:0px;
            width:0px;
            position:absolute;
            pointer-events:none;
        }
        .ol-popup:after
        {
            border-top-color:white;
            border-width:10px;
            left:191px;
            margin-left:-10px;
        }
        /* .ol-popup:before
        {
            border-top-color:#cccccc;
            border-width:11px;
            left: 191px;
            left:-11px;
        } */
        #popup-close{
            position: absolute;
            top: 5px;
            right: 5px;
            font-size: 12px;
            cursor: pointer;
        }

/* popup css  end */

    ul.ul-manager-wraper{
        overflow: hidden;
        float: right;
        height: 35px;
        padding-right: 10px;
    }
    ul.ul-manager-wraper>li {
        float: left;
        height: 35px;    
        margin-left: 10px;  
    }
    ul.ul-manager-wraper li.maps{
        line-height: 35px;
        width: 100px;
    }
    ul.ul-manager-wraper li.maps .ivu-select-item{
        width: 100%;
    }
    
    ul.ul-manager-wraper li.gongju{
        line-height: 35px;
    }

    p.operation span{
        margin-right:  5px;
    }

 /* 监控结束 */


/* 报表css开始 */
    div.report-left-wrap .ivu-icon {
        margin-top: -3px;
    }
    div.report-wraper{
        position: relative;
    }
    div.report-wraper>div{
        position: absolute;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
    }
    div.report-left-wrap{
        left: 0px;
        width: 240px;
        background: #FFFFFF;
    }
    div.report-right-wrap{
        right: 0;
        left: 240px;
    }

/* 报表css结束 */



  /* 后台管理开始 */
    div.manager-wraper,div.trackdebug-wraper{
        height: 100%;
        width: 100%;
        position: relative;
    }
    div.manager-wraper>div{
        position: absolute;
        top: 0;
    }
    div.mar-nav{
        left: 0;
        width: 240px;
        bottom: 0;
        background: #FFFFFF;
        overflow-y: auto;
        overflow-x: hidden;
    }
    div.mar-view{
        bottom: 0;
        right: 0;
        left: 240px;
        overflow-y: auto;
    }
    .ivu-icon {
        margin-top:-3px; 
    }
    .full .ivu-icon{
        margin-top:-7px; 
    }
  /* 后台管理结束 */


/* 轨迹debug */
.trackdebug-wraper .control-wrapper, .trackdebug-wraper .table-wrappr, .trackdebug-wraper .page-wrappr{
    position: absolute;
    left: 0;
    right: 0;
}

.trackdebug-wraper .control-wrapper{
    height: 45px;
    top: 0;
}
.trackdebug-wraper .control-wrapper>ul{
    padding-top: 6.5px;
    overflow: hidden;
    padding-left: 15px;
}
.trackdebug-wraper .control-wrapper>ul>li{
    float: left;
    margin-right: 15px
}

.trackdebug-wraper .table-wrappr{
    top: 45px;
    bottom: 45px;
    overflow-y: auto;
}
.trackdebug-wraper  .content-wrap{
    position: absolute;
    right: 5px;
    bottom: 5px;
    z-index: 9999;
}
#content-string{
    overflow: hidden;
    word-wrap:break-word;
}

.trackdebug-wraper .page-wrappr{
    height: 45px;
    bottom: 0;
    padding-right: 20px;
    background: #fff;
}
.trackdebug-wraper .page-wrappr>div{
    padding-top: 5px;
    float: right;
}





  /* 添加客户css开始 */
    #addcustomer{
        padding: 10px;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        position: relative;
    }
   
    #addcustomer>div>div{
        margin: 0 auto;
        width: 780px;
    }

   /* 添加客户css开始 */



   /* 查询客户css开始 */
    #query-company{
        padding: 10px;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        position: relative;
    }

    #query-company>div>div{
      width: 100%;
    }
    #query-company>div> ul{
        height: 42px;
    }
    #query-company>div> ul>li{
        float: left;
        width: 150px;
        margin-right: 10px;
        padding: 5px 0;
        position: relative;
    }
   /* 查询客户css结束 */


   /* 编辑客户开始 */
   #editcustomer{
        padding: 10px;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        position: relative;
    }
    #editcustomer>div>h3{
        position: relative;
    }
    #editcustomer>div>h3>span{
        position: absolute;
        right: 10px;
        top: 0;
        bottom: 0;
        width: 80px;
        height: 100%;
    }
    #editcustomer>div>div{
        margin: 0 auto;
        width: 780px;
    }  
   /* 编辑客户结束 */


   /* 添加分组开始 */
    #addgroup{
        padding: 10px;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        position: relative;
    }
   
    #addgroup>div>div{
        margin: 0 auto;
        width: 850px;
    }

    #addgroup>div>h3{
        position: relative;
    }
    #addgroup>div>h3>span{
        position: absolute;
        right: 10px;
        top: 0;
        bottom: 0;
        width: 80px;
        height: 100%;
    }
   /* 添加分组结束 */


   /* 查询分组开始 */
   #querygroup{
        padding: 10px;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        position: relative;
    }
    #querygroup>div.full{
        overflow-y: auto;
    }
    #querygroup>div>div{
        width: 100%;
    }
    #querygroup>div> ul{
        height: 42px;
    }
    #querygroup>div> ul>li{
        float: left;
        width: 150px;
        margin-right: 10px;
        padding: 5px 0;
        position: relative;
    }
   /* 查询分组结束 */


   /* 添加用户开始 */
   #adduser{
        padding: 10px;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        position: relative;
    }
    #adduser>div>div{
        margin: 0 auto;
        width: 700px;
    }
   /* 添加用户结束 */


   /* c查询用户 */
   #queryuser{
        padding: 10px;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        position: relative;
    }
    #queryuser>div>div{
        width: 100%;
    }
    #queryuser>div> ul{
        height: 42px;
    }
    #queryuser>div> ul>li{
        float: left;
        width: 150px;
        margin-right: 10px;
        padding: 5px 0;
        position: relative;
    }
    div.my-total{
        /* border: 1px solid #DCDEE2; */
        margin: 10px 0;
    }
    div.my-total>span{
        display: inline-block;
        padding-right: 15px;
    }
   /* 查询用户 */

   /* 编辑user开始 */
    #edituser{
        padding: 10px;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        position: relative;
    }

    #edituser>div>div{
        margin: 0 auto;
        width: 700px;
    }

    #edituser>div>h3{
        position: relative;
    }
    #edituser>div>h3>span{
        position: absolute;
        right: 10px;
        top: 0;
        bottom: 0;
        width: 80px;
        height: 100%;
    }
/* 编辑user结束 */




   /* 添加设备开始 */
    #adddevice{
        padding: 10px;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        position: relative;
    }
   
    #adddevice>div>div{
        margin: 0 auto;
        width: 740px;
    }

   /* 添加设备开始 */


   /* 查询设备开始 */
   #querydev{
    padding: 10px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    }

    #querydev>div>div{
    width: 100%;
    }
    #querydev>div> ul{
        height: 42px;
    }
    #querydev>div> ul>li{
        float: left;
        width: 150px;
        margin-right: 10px;
        padding: 5px 0;
        position: relative;
    }
    /* 查询设备结束 */

    /* 编辑设备开始 */
    #editdevice{
        padding: 10px;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        position: relative;
    }
    #editdevice>div>h3{
        position: relative;
    }
    #editdevice>div>h3>span{
        position: absolute;
        right: 10px;
        top: 0;
        bottom: 0;
        width: 80px;
        height: 100%;
    }
    #editdevice>div>div{
        margin: 0 auto;
        width: 700px;
    }
     /* 编辑设备结束 */


    /* 报警css开始 */
    @-webkit-keyframes twinkling {
        0% {
            opacity:1;
            filter:alpha(opacity=100);
            -webkit-transform:scale(1);
        }
        50% {
            opacity:0.5;
            filter:alpha(opacity=50);
            -webkit-transform:scale(0.5);
        }
        100% {
            opacity:0;
            filter:alpha(opacity=0);
            -webkit-transform:scale(1);
        }
    }
    div.waring-wraper{
        position: absolute;
        right: 2px;
        bottom: 2px;
        background: #495060;
        border: 1px solid #395060; 
        transition: width .3s, height .3s, transform 2s;
        z-index: 999;
    }

    ul.waring-controller{
        color: #fff;
        overflow: hidden;
    }

    ul.waring-controller span.msgwaring{
        -webkit-animation:twinkling 1s infinite ease;
        animation:twinkling 1s infinite ease;
        color: #fff;
    }

    ul.waring-controller span.msgnormal{
        color: #fff;
        -webkit-animation:none;
        animation: none;
    }

    ul.waring-controller li {
        float: left;
        text-align: center;  
        border-top:1px solid #fff; 
    }
    
    div.msg_main{
        width: 100%;
        height: 100%;
        color: #fff;
        background: #F8F8F9;
        
        position: relative;
    }

    div.msg_header{
        position:absolute;
        left: 0px;
        height: 22px;
        right: 0px;
        background: #495060;
        color: #fff;
    }

    div.msg_header ul{
        overflow: hidden;
    }

    div.msg_header ul li{
        float: left;
        min-width: 70px;
        text-align: center;
        line-height: 22px; 
        cursor: pointer;
        padding: 0 5px;
    }
    div.msg_header ul li:last-child{
        margin-left: 15px;
        padding: 0;
    }
    div.msg_header ul li.selected{
        color: #495060;
        background: #F8F8F9;
    }
    div.shrink-btn{
        position:absolute;
        top: 0px;
        right: 3px;  
        height: 22px;
        width: 54px;
        text-align: center;
        cursor: pointer;
    }

    div.shrink-btn>span{
        display: inline-block;
        width: 22px;
        height: 22px;
    }

    div.msg_content{
        position:absolute;
        left: 0px;
        right: 0px;
        top: 22px;
        bottom: 0;
        overflow: hidden;
        color: #495060;
    }

    /* 报警css结束 */

    #system-view{
        overflow-y: auto;
    }

    .demo-auto-complete-title{
        display: inline-block;
        width: 100%;
        height: 100%;
    }